import React, {Component} from 'react';
import moment from 'moment';
import {
	AppRegistry,
	Dimensions,
	Platform,
	NativeModules,
	DeviceInfo,
	StyleSheet,
	Image,
	Text,
	View,
	TextInput,
	PixelRatio,
	TouchableOpacity,
	ScrollView,
	AsyncStorage
} from 'react-native';

var Common = require('./common');
var num = 4;
// iPhoneX
const X_WIDTH = 375;
const X_HEIGHT = 812;

// screen
const SCREEN_WIDTH = Dimensions.get('window').width;
const SCREEN_HEIGHT = Dimensions.get('window').height;



const pixelRatio = PixelRatio.get();
const dismissKeyboard = require('dismissKeyboard');
const useWebKit = true;

export default class MinePage extends Component {
	// 此处设置 Tab 的名称和一些样式，这里的会覆盖掉配置路由文件的样式，下面会讲
	static navigationOptions = {
		headerTitle: '我的',
		tabBarLabel: '我的',
		tabBarIcon: ({focused}) => {
			if (focused) {
				return (
					<Image style={{height: 30, width: 30}}
					       source={require('./images/wode1.png')}/>
				);
			}
			return (
				<Image style={{height: 30, width: 30}}
				       source={require('./images/wode.png')}/>
			);
		},
		header: null,
	};

	constructor(props) {
		super(props);
		this.state = {
			iphonex: false,
			showCeng: false,
			str: '推荐',
			news: [],
			imgsrc: 'https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1514356844477&di=7c57fde0860194258cbec5c2720e0cf5&imgtype=0&src=http%3A%2F%2Fwww.swkweike.com%2Fdata%2Fuploads%2F2015%2F05%2F26%2F20430804665564348adc669.png',
			loadId: null,
			userinfo:{avatar:{}},
			collectArr:{},
			diggArr:{},
		};
	}

	isIphoneX() {
		return (
			Platform.OS === 'ios' &&
			((SCREEN_HEIGHT === X_HEIGHT && SCREEN_WIDTH === X_WIDTH) ||
				(SCREEN_HEIGHT === X_WIDTH && SCREEN_WIDTH === X_HEIGHT))
		)
	}


	ifIphoneX() {
		var flag = this.isIphoneX();
		if (flag) {
			console.log('true')
			this.setState({
				iphonex: true
			})
		} else {
			console.log('false')
			this.setState({
				iphonex: false
			})
		}
	}


	login() {
		var _this = this;
		Common.ajaxPost(Common.url + 'login.php', function (res) {
			if (res.code == "0000") {

			}
		}.bind(this), {verify: '08login', t: ''});
	}

	toRegister() {
		this.props.navigation.navigate('Register')
	}

	toHome() {
		this.props.navigation.navigate('Home')
	}
	renderPic(pic){
		return pic.map(function (data, index) {
			return (
				<Image key={index} style={styles.imgsItem} source={{uri:data.attach_url }} />
			);
		})
	}
	renderNews(news) {
		var _this = this;
		var bgColor = '#fff';
		return news.map(function (data, index) {
			return (
				<TouchableOpacity key={index}  style={styles.newsItem} onPress={_this.toDetail.bind(_this,data)}>
					<View style={styles.user}>
						<Image style={{width:36,height:36,borderRadius:18}} source={{uri:data.user_info.avatar_original }}/>
						<View style={{paddingLeft:10,}}>
							<Text style={styles.userText}>{data.user_info.uname}</Text>
							<Text style={{fontSize:14,color:'#8c8c8c'}}>{data.publish_time}</Text>
						</View>
					</View>
					<Text style={styles.newsTitle}>{data.content_txt}</Text>
					<View style={styles.imgs}>
						{data.var && data.var.attachInfo && data.var.attachInfo.length?(
							_this.renderPic(data.var.attachInfo)
						):(null)}
					</View>
					<View style={styles.hudong}>
						<TouchableOpacity style={styles.hodongItem}>
							<Image style={{width:22,height:22,marginRight:6}} source={require('./images/shoucang.png')} />
							<Text>{data.collect_count}</Text>
						</TouchableOpacity>
						<TouchableOpacity style={styles.hodongItem}>
							<Image style={{width:22,height:22,marginRight:6}} source={require('./images/zan.png')} />
							<Text>{data.digg_count}</Text>
						</TouchableOpacity>
						<TouchableOpacity style={styles.hodongItem}>
							<Image style={{width:22,height:22,marginRight:6}} source={require('./images/pinglun.png')} />
							<Text>{data.comment_count}</Text>
						</TouchableOpacity>
					</View>
				</TouchableOpacity>
			);
		})
	}

	getData() {
		var _this = this;

		Common.ajaxGet(Common.url + 'thinksns/index.php?app=widget&mod=FeedList&act=loadMore&loadId='+this.state.loadId+'&type=all&feed_type=&feed_key=&fgid=&topic_id=&load_count='+num+'&is_ajax=1&orderby=', function (res) {
			console.log(res)
			if (res.status == 1) {
				var data = res.list;
				if (data.data && data.data.length) {
					this.setState({
						diggArr: data.diggArr,
						collectArr: data.collectArr
					})
					for(var item of data.data){
						item.publish_time = moment(parseFloat(item.publish_time+'000')).format('YYYY-MM-DD HH:mm:ss');
						if(!item.collect_count){
							item.collect_count=0;
						}
						if(!item.digg_count){
							item.digg_count=0;
						}
						if(!item.comment_count){
							item.comment_count=0;
						}
					}
					this.setState({
						loadId: data.data[data.data.length-1].feed_id,
						news: this.state.news.concat(data.data),
						refreshing: true,
						hasMore: true,
					})

				} else {
					this.setState({
						hasMore: false,
						refreshing: false,
					})
					console.log('hasMore', this.state.hasMore);
				}
			}
		}.bind(this), {verify: '08login', t: ''});
	}
	toDetail(item){
		var json = item;
		json.collectArr = this.state.collectArr;
		json.diggArr = this.state.diggArr;
		this.props.navigation.navigate('HudongDetail',json)
	}

	toMineHudong(){
		console.log('hhhh')
		this.props.navigation.navigate('MineHudongPage','space')
	}
	toMineShoucang(){
		console.log('hhhh')
		this.props.navigation.navigate('MineHudongPage','love')
	}

	//跳到资讯列表
	toNewsList() {
		this.props.navigation.navigate('NewsList')
	}

	toSetting() {
		this.props.navigation.navigate('SystemSetting')
	}

	toMessageList() {
		this.props.navigation.navigate('MessageList')
	}

	toMyProfile() {
		this.props.navigation.navigate('MyProfile')
	}

	componentDidMount() {
		AsyncStorage.getItem('logindata').then((value)=>{
			console.log(JSON.parse(value))
			this.setState({
				userinfo:JSON.parse(value)
			})
		})
		this.ifIphoneX();
		this.getData()
		// console.log(this.props.navigation.state.params)
		// if(this.props.navigation.state.params.from){
		//   this.setState({
		//     from:this.props.navigation.state.params,
		//   })
		// }
	}

	render() {
		const {navigate} = this.props.navigation;
		return (
			<View style={styles.container}>
				<TouchableOpacity style={styles.mineTop} onPress={this.toMyProfile.bind(this)}>
					<Image style={{width: 52, height: 52, marginRight: 18, borderRadius: 26,}}
					       source={{uri:this.state.userinfo.avatar.avatar_original}}/>
					<View style={{flex: 1}}>
						<Text style={{fontSize: 18, paddingBottom: 3}}>{this.state.userinfo.uname}</Text>
						<Text style={{fontSize: 16, color: '#696969'}}>编辑个人资料</Text>
					</View>
					<Image style={{width: 22, height: 22}} source={require('./images/jiantou.png')}/>
				</TouchableOpacity>
				<View style={{height: 8, backgroundColor: '#f5f5f5'}}></View>
				<View style={styles.quicknav}>
					<TouchableOpacity style={styles.quicknavItem} onPress={this.toMineShoucang.bind(this)}>
						<Image style={{width: 22, height: 22}} source={require('./images/shoucang2.png')}/>
						<Text style={styles.quicknavItemText}>我的收藏</Text>
					</TouchableOpacity>
					<TouchableOpacity style={styles.quicknavItem} onPress={this.toMineHudong.bind(this)}>
						<Image style={{width: 22, height: 22}} source={require('./images/fatie.png')}/>
						<Text style={styles.quicknavItemText}>我的发帖</Text>
					</TouchableOpacity>
					<TouchableOpacity style={styles.quicknavItem}>
						<Image style={{width: 22, height: 22}} source={require('./images/gouzhiq.png')}/>
						<Text style={styles.quicknavItemText}>购置器</Text>
					</TouchableOpacity>
					<TouchableOpacity style={styles.quicknavItem}>
						<Image style={{width: 22, height: 22}} source={require('./images/baoxianqi.png')}/>
						<Text style={styles.quicknavItemText}>保险器</Text>
					</TouchableOpacity>
				</View>
				<View style={{height: 8, backgroundColor: '#f5f5f5'}}></View>
				<View>
					<TouchableOpacity style={styles.nav2} onPress={this.toMessageList.bind(this)}>
						<Image style={{width: 15, height: 18}} source={require('./images/tongzhi.png')}/>
						<Text style={{flex: 1, marginLeft: 12, fontSize: 16,}}>我的通知</Text>
						<Image style={{width: 22, height: 22}} source={require('./images/jiantou.png')}/>
					</TouchableOpacity>
					<TouchableOpacity style={[styles.nav2, {border: 0}]} onPress={this.toSetting.bind(this)}>
						<Image style={{width: 15, height: 18}} source={require('./images/xitong.png')}/>
						<Text style={{flex: 1, marginLeft: 12, fontSize: 16,}}>系统设置</Text>
						<Image style={{width: 22, height: 22}} source={require('./images/jiantou.png')}/>
					</TouchableOpacity>
				</View>
				<View style={{height: 8, backgroundColor: '#f5f5f5'}}></View>
				<ScrollView>
					{this.state.news.length?(
						this.renderNews(this.state.news)
					):(null)}
				</ScrollView>


			</View>
		);
	}
}

const styles = StyleSheet.create({
	container: {
		flex: 1,
		height: Common.screenHeight,
		backgroundColor: '#fff',
	},
	mineTop: {
		flexDirection: 'row',
		alignItems: 'center',
		paddingLeft: 16,
		paddingRight: 25,
		paddingTop: 25,
		paddingBottom: 25,
	},
	newsItem: {
		marginLeft: 20,
		marginRight: 20,
		paddingTop: 15,
		paddingBottom: 15,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
	},
	user: {
		flexDirection: 'row',
		alignItems: 'center',
	},
	userText: {
		fontSize: 16
	},
	newsTitle: {
		fontSize: 18,
		lineHeight: 22,
		paddingBottom: 10,
		paddingTop: 10,
	},
	imgs: {
		flexDirection: 'row',

		alignItems: 'center',
	},
	imgsItem: {
		width: (Common.screenWidth - 70) / 3,
		height: (Common.screenWidth - 70) / 3,
		marginLeft: 5,
		marginRight: 5
	},
	hudong: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'flex-end',
		paddingTop: 10,
	},
	hodongItem: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		marginLeft: 15,
	},
	quicknav: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		paddingBottom: 16,
		paddingTop: 16,
	},
	quicknavItem: {
		flex: 1,
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'center'
	},
	quicknavItemText: {
		fontSize: 16,
		paddingTop: 10,
	},
	nav2: {
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		paddingLeft: 25,
		paddingRight: 25,
		height: 50,
		borderBottomColor: '#e9e9e9',
		borderBottomWidth: 1,
	},


	bnav: {
		width: Common.screenWidth,
		height: 50,
		position: 'absolute',
		left: 0,
		bottom: 0,
		flexDirection: 'row',
		alignItems: 'center',
		justifyContent: 'center',
		backgroundColor: '#f4f5f8',
		borderTopColor: '#afafaf',
		borderTopWidth: 1,
	},
	bnavItem: {
		flex: 1,
		flexDirection: 'column',
		alignItems: 'center',
		justifyContent: 'center'
	},
	bnavText: {
		textAlign: 'center',
		paddingTop: 5,
	},
	bnavImg: {
		margin: 'auto'
	}
});
